<template>
  <h2>多个 v-model 语法糖 </h2>
  <div>用户名： {{ username }}</div>
  <CustomDefaultModel v-model="username"></CustomDefaultModel>
  <hr />
  <div>
    {{ first }} ---- {{ last }}
  </div>
  <h2>多个 v-model 绑定 、 v-model 的参数 </h2>
  <CustomMoreModel 
  v-model:first-name="first"
  v-model:last-name="last" />
  <hr />
  <h2>处理 v-model 修饰符 </h2>
  <CustomModifiyModel v-model:title.capitalize="username" />

</template>

<script setup lang="ts">
import {ref} from 'vue'
import CustomDefaultModel from '@/pages/vue3Advance/comp/CustomDefaultModel.vue'
import CustomMoreModel from '@/pages/vue3Advance/comp/CustomMoreModel.vue'
import CustomModifiyModel from '@/pages/vue3Advance/comp/CustomModifiyModel.vue'
const username = ref('')
const first = ref('')
const last = ref('')

</script>

<style scoped lang="scss">
</style>